<template>
   <header id="header">
      <!-- BEGIN MENU -->
      <div class="menu_area">
        <nav class="navbar navbar-default navbar-fixed-top" :class="{changeh: hh}" role="navigation" >
        <div class="container">
            <div class="navbar-header">
<a class="navbar-brand" href="index.html"><em><img src="images/logo.png" style="width: 50px;height:50px; margin-bottom: 20px;"></em><span style="font-size:50px;">宿蜂</span></a>
            </div>
            <div id="navbar" class="navbar-collapse collapse"  style="bottom: 60px;">
              <ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
                <li><a>主页</a></li>
                <li><a href="#usescence">使用场景</a></li>
                <li><a href="#members">关于我们</a></li>
                <li><a href="#development">发展历程</a></li>
                <li><a href="#joinus">加入我们</a></li>
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </nav>
      </div>
      <!-- END MENU -->
    </header>
</template>

<script>
export default {
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  data () {
    return {
      hh: false
    }
  },
  methods: {
    handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop <= 60) {
        this.hh = false
      } else {
        this.hh = true
      }
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style scoped>
.changeh{
  height: 75.992px;
}
</style>
